<div class="mb-section">
  <div class="container px-0 px-md-4">
    <div class="bg-white">
      <div class="flex-column-reverse flex-md-row row g-0">
        <div class="col-12 col-md-6 px-4 px-md-2">
          <div class="d-flex align-items-center h-100 text-md-start justify-content-md-start text-start justify-content-start">
            {%- assign icon_blocks = section.blocks | where: "type", "icon" -%}
            <div class="text-content mx-auto mw-text-3">
              <div class="">
                {%- if section.settings.heading != empty -%}
                  <h4 class="h2 fw-bold mb-3">{{ section.settings.heading }}</h4>
                {%- endif -%}
                {%- if section.settings.text != empty -%}
                  <div class="gray-700 fw-normal mb-2 no-last-margin richtext-with-link">
                    {{ section.settings.text }}
                  </div>
                {%- endif -%}
              </div>
              {%- if icon_blocks.size > 0 -%}
                <div class="col-12 px-0 order-1 mt-5 mt-lg-6">
                  <div class="row mx-n2  justify-content-md-start justify-content-start mx-lg-n3 justify-content-md-start justify-content-start mb-n4 ">
                    {%- for block in icon_blocks -%}
                      <div class="mb-4 px-2 col-sm-6 col-6 text-md-start text-start px-lg-3">
                        <div>
                          {% if block.settings.image != blank %}
                            <div class="mx-md-0 mx-0 mb-2 w-50 mobile-w-25">
                              <div class="ratio" style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;">
                                <img
                                  class="w-100 h-100"
                                  loading="lazy"
                                  height="{{ block.settings.image.height }}"
                                  width="{{ block.settings.image.width }}"
                                  alt="{{ block.settings.image.alt | escape }}"
                                  srcset="{{ block.settings.image | img_url: 'master' }}"
                                  src="{{ block.settings.image | img_url: 'master' }}">
                              </div>
                            </div>
                          {% endif %}
                          <div>
                            <div>
                              {% if block.settings.heading != blank %}
                                <h6
                                  class="mb-0">{{ block.settings.heading }}</h6>
                              {% endif %}
                              {% if block.settings.text != blank %}
                                <div
                                  class="gray-700 no-last-margin">{{ block.settings.text }}</div>
                              {% endif %}
                            </div>
                          </div>
                        </div>
                      </div>
                    {%- endfor -%}
                  </div>
                </div>
              {%- endif -%}
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
          <div class="d-none d-md-flex align-items-center ratio ratio-1x1 as-parallax-wrap">
            <div class="d-block">
              {%- if section.settings.magazine_image != nil -%}
                <div
                  class="end-0 top-0 position-absolute ratio magazine-image as-parallax-list"
                  data-start="1"
                  data-end=".3"
                  style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.magazine_image.aspect_ratio | times: 100 }}%;">
                  {{ section.settings.magazine_image | image_url: width: section.settings.magazine_image.width | image_tag: loading: 'lazy', class: 'rounded-2' }}
                </div>
              {%- endif -%}
              {%- if section.settings.book_image != nil -%}
                <div
                  class="as-parallax-list book-image bottom-0 position-absolute ratio start-0"
                  data-start="1.6"
                  data-end="-1"
                  style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.book_image.aspect_ratio | times: 100 }}%;">
                  {{ section.settings.book_image | image_url: width: section.settings.book_image.width | image_tag: loading: 'lazy', class: 'rounded-2' }}
                </div>
              {%- endif -%}
            </div>
          </div>

          <div class="d-flex d-md-none align-items-center w-100">
            {%- if section.settings.mobile_image != nil -%}
              <div class="as-parallax-list position-relative ratio d-md-none d-block"
                style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.mobile_image.aspect_ratio | times: 100 }}%;">
                {{ section.settings.mobile_image | image_url: width: section.settings.mobile_image.width | image_tag: loading: 'lazy', class: 'rounded-2' }}
              </div>
            {%- endif -%}
          </div>

        </div>
      </div>
    </div>
  </div>
</div>


{% schema %}
  {
    "name": "Teasing image with icons",
    "class": "image-with-icons",
    "tag": "section",
    "settings": [
      {
        "type":"header",
        "content":"Desktop image"
      },
      {
        "label": "Magazine Image",
        "type": "image_picker",
        "id": "magazine_image"
      }, {
        "label": "Book Image",
        "type": "image_picker",
        "id": "book_image"
      },
      {
        "type":"header",
        "content":"Mobile image"
      },
      {
        "label": "Image",
        "type": "image_picker",
        "id": "mobile_image"
      },
      {
        "type": "text",
        "id": "heading",
        "default": "Image with text",
        "label": "Heading"
      }, {
        "type": "richtext",
        "id": "text",
        "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "label": "Text"
      }
    ],
    "blocks": [
      {
        "type": "icon",
        "name": "Icon",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Icon"
          }, {
            "type": "text",
            "id": "heading",
            "default": "Heading",
            "label": "Heading"
          }, {
            "type": "richtext",
            "id": "text",
            "default": "<p>Text</p>",
            "label": "Text"
          }
        ]
      }
    ]
  }
{% endschema %}
